<template>
  <div>
    <el-page-header @back="goBack" content="修改密码">
    </el-page-header>
    <form @submit.prevent="changePassword">
      <label for="username">账号：</label>
      <input type="text" id="username" v-model="username" required>

      <label for="password">当前密码：</label>
      <input type="password" id="password" v-model="password" required>

      <label for="newPassword">新密码：</label>
      <input type="password" id="newPassword" v-model="newPassword" required>

      <label for="confirmPassword">确认新密码：</label>
      <input type="password" id="confirmPassword" v-model="confirmPassword" required>

      <button type="submit">提交</button>
    </form>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      newPassword: '',
      confirmPassword: '',
    };
  },
  methods: {
    goBack() {
        this.$router.replace('/PersonView');
    },
    changePassword() {
      // 前端验证新密码与确认密码是否一致
      if (this.newPassword !== this.confirmPassword) {
        alert("新密码与确实密码不一致");
      } else if(this.newPassword===this.password){
        alert("新密码与旧密码相同")
      }
      else{
        // 向后端发送请求修改密码
        axios.post('http://localhost:8081/springboot01/user/updatePwd  ', {
          username: this.username,
          password: this.password,
          newPassword: this.newPassword
        }, {
          headers: {
            'Content-Type': 'application/json'
          }
        })
            .then(response => {
              console.log('Response data:', response.data);
              if(response.data.msg==='请求失败!')alert("密码错误");
              else alert("更新成功");
            })
            .catch(error => {
              if (error.response && error.response.data && error.response.data.msg) {
                alert('error');
              } else {
                alert("账号错误");
              }
              console.error('Error:', error);
            });
      }
    }
  }
};
</script>


<style scoped>
/* Add your scoped styles here */
h2 {
  text-align: center;
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

form {
  max-width: 400px;
  margin: 150px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="text"]
{
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
input[type="password"] {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: 10px;
  background-color: #333333;
}

button {
  width: 100%;
  height: 2.25rem;
  background-color: #ff9bad;
  color: white;
  border: none;
  border-radius: 3rem;
  font-size: 0.8em;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

button:hover {
  color: #ff9bad;
}

button:after {
  content: "";
  background: white;
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skew(-45deg) scale(0, 1);
  transition: all 0.5s;
}

button:hover:after {
  transform: skew(-45deg) scale(1, 1);
}


p {
  margin-top: 10px;
  font-size: 16px;
}
</style>